<template>
  <div class="classH5-list">
        
    <div class="user-box">
        <div class="user-content flex-row">
            <div class="user-picture">
                <img :src="currentUser.photo" alt="">
            </div>
            <div class="user-right flex-col">
                <div class="user-name">{{userName}}</div>
                <div class="user-location">城市：{{currentCity}}</div>
            </div>
        </div>
        
    </div> 
    <div class="list-box">
        <div class="list-content">
            <div class="list-item null-img" v-if="loaded && classPlanList.length==0">
                <img src="../../../static/h5img/dindankong.png" alt="">
                <div class="null-text">当前暂无相关开班计划</div>
            </div>
           
            <div class="list-item" v-for="(item,key) in classPlanList" :key="key+'classPlanList'">
                <div class="course-title">{{item.course.name}}</div>
                <div class="signed" v-if="item.courseStatus == '1'">您已报名，但是还未选择空余时间！</div>
                <div class="course-date flex-row">
                    <div v-if="item.classPlanType == '0'">{{formatTime(item.selTimeBegin)}}{{item.courseStatus=='2'?('、' + formatTime(item.selTimeEnd)):''}}</div>
                    <div v-if="item.classPlanType == '1'">{{formatTime(item.selTimeBegin,1)}}~{{ formatTime(item.selTimeEnd,2)}}</div>
                    <div>{{formatTime(item.cutOffTime)}}</div>
                </div>
                <div class="course-date-descript flex-row">
                    <div v-if="item.classPlanType == '0'">{{item.courseStatus=='2'?'上课时间':'开班时间'}}</div>
                    <div v-if="item.classPlanType == '1'">上课时间</div>
                    <div>报名截止时间</div>
                </div>
                <div class="course-date flex-row" v-if="item.classPlanType == 1">
                    <div>{{item.employeeName}}</div>
                    <div></div>
                </div>
                <div class="course-date-descript flex-row" v-if="item.classPlanType == 1">
                    <div>活动创建人</div>
                    <div></div>
                </div>
                <div class="sign-btn" @click="handelSelect(key)" :class="{'sign-btn-success':item.courseStatus == '1','sign-btn-desable':item.courseStatus == '2' || item.courseStatus == '6'}">{{item.courseStatus == '0' || item.courseStatus == '7'?'立即报名':(item.courseStatus == '1'?'选择空闲时间':'已报名')}}</div>
                <div class="course-endTime" v-if="item.courseStatus!='2'">预计结课时间：{{formatTime(item.selTimeEnd)}}</div>
                <div class="course-endTime" v-if="item.classPlanType == '1' && item.qq">活动群号(QQ群): {{item.qq}}</div>
            </div>
            <div class="list-item-last"></div>
        </div>
    </div>
    <modal v-if="signModal">
        <div class="sign-content">
            <div class="sign-confirm-tent">
                <div class="confirm-title">是否确定报名 {{applyCourse.course.name}} 课程？</div>
                <div class="sign-start"> {{applyCourse.classPlanType == 0?'开课时间为：':'上课时间为：'}}{{applyCourse.classPlanType == 0?formatTime(applyCourse.selTimeBegin):(formatTime(applyCourse.selTimeBegin,1) + '~' + formatTime(applyCourse.selTimeEnd,2))}}</div>
                <div class="sign-end" v-if="applyCourse.classPlanType == 0"> 结课时间为：{{formatTime(applyCourse.selTimeEnd)}}</div>
            </div>
            <div class="sign-confirm-btn" @click="handelApply(applyCourse.classPlanType,applyCourse.hcId,applyCourse.id)">立即报名</div>
            <div class="sign-confirm-await"><span @click="showSignModal(false)">我再想想</span></div>
            <div class="sign-confirm-icon"><img src="/static/h5img/LOGO.png" alt=""></div>
        </div>
    </modal>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '../../store/index.js'
import moment from 'moment'
import modal from './h5Modal'
import { Toast } from 'vant'
import {classPlan, addToClassPlan, userInfo, addToGraduClassPlan} from 'api/getData'
import {formatCourseList, toChineseWords} from 'plus/unconfirmPack'
export default {
    beforeRouteEnter (to, from, next) {
        try{
            if(to.query.user){
                let users = JSON.parse(decodeURIComponent(to.query.user))
                store.dispatch('setUser',users)
                next()
            }else if(to.query.chart){
                store.dispatch('setUser',{})
                next('H5Login')
            }else if(store.getters.isLogin){
                next()
            }else{
                next('H5Login')
            }
        }catch(err){
            next('H5Login')
        }
        
    },  
    data() {
        return {
            signModal: false,
            classPlanList:[],
            applyCourse:null,
            currentCity:'',
            userName:'',
            loaded:false,
            currentApplyKey:null
        }
    },
  
    created() {
        this.getClassList()
        userInfo(this.currentUser.type, this.currentUser.cluesOrStuId).then(res=>{
            this.userName = res.info.name
            this.currentCity = res.info.cityName || localStorage.getItem("curCity")
        })
  },
  computed: {
    ...mapGetters(['currentUser','cityName'])
  },
  methods:{

    getClassList(){
        classPlan(this.currentUser.cluesOrStuId).then(res=>{
            this.classPlanList = formatCourseList(res.mapList)
            this.loaded = true
        })
    },
    handelApply(classType,hcId, id){
        this.showSignModal(false)
        Toast.loading({
        mask: true,
        duration: 0,
        message: '报名中...'
        })
        if(classType == '1'){
            addToGraduClassPlan(hcId, id).then(res =>{
                this.applyCourse.courseStatus = '6'
                this.classPlanList[this.currentApplyKey] = this.applyCourse
                Toast.success({
                mask:true, message:'报名成功'
                })
                this.getClassList()
            }).catch(msg =>{
                Toast.clear()
                Toast.fail({
                mask:true, message:'报名失败'
                })
            })
        }else{
            addToClassPlan(hcId, id)
            .then(res =>{
                Toast.success({
                mask:true, message:'报名成功'
                })
                setTimeout(()=>{
                    Toast.clear()
                    this.$router.push({
                    path:'/H5selectDate',
                    query:{
                        id:res.historyCourse.classPlanId,
                        hcId:res.historyCourse.id
                    }
                })
                }, 1000)
            })
            .catch(msg =>{
                Toast.clear()
                Toast.fail({
                mask:true, message:'报名失败'
                })
            })
        }
        
    },  
    handelSelect(key){
        let item = this.classPlanList[key]
        console.log(item)
        if(item.courseStatus == '2' || item.courseStatus == '6'){
            //已报名，已选择时间
            return
        }else if(item.courseStatus == '0' || item.courseStatus == '7'){
            //未报名
            this.currentApplyKey = key
            this.applyCourse = this.classPlanList[key]
            this.showSignModal(true)
        }else{
            this.$router.push({
                path:'/H5selectDate',
                query:{
                    id:item.id,
                    hcId:item.hcId
                }
            })
        }
    },
    showSignModal(bool){
        this.signModal = bool
    },
    hrefSelectDate(){
        this.$router.push({
                path: '/classPlan/selectDate'
        })
    },
    formatTime(time,type){
        if(type == 1) return moment(time).format('Y/M/D HH:mm')
        else if(type == 2) return this.$moment(time).format('HH:mm')
        return moment(time).format('Y/M/D')
    }
  },
  components:{
    modal
  }
}

</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
.classH5-list{
  
}
.null-img{
    text-align center
    img{
        width 13rem
        height 22rem
    }
}
.null-text{
    text-align:center;
    font-size:2.8rem;
    font-family:MicrosoftYaHeiUI;
    color:rgba(30,30,30,1);
    margin-top:4rem;
}
.user-box{
    height:38.2rem;
    padding: 4rem 3rem 0 3rem;
    box-sizing: border-box;
    background:linear-gradient(166deg,rgba(255,106,5,1) 0%,rgba(255,36,13,1) 100%);
    .user-picture{
        width:14.8rem;
        height:14.8rem;
        box-sizing: border-box;
        border: 1rem solid rgba(255,163,129,1);
        border-radius: 50%;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .user-right{
        margin-left: 2rem;
        justify-content: space-around;
    }
    .user-name{
        font-size:4.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
    .user-location{
        font-size:2.4rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
}
.list-box{
    position: relative;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    .list-content{
        box-sizing: border-box;
        padding: 0 3rem;
        width: 100%;
        position: absolute;
        top: -15.8rem;
        height: 40rem;
    }
}
.list-item{
    box-sizing: border-box;
    min-height: 30rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.7rem 2rem 0rem rgba(0,0,0,0.08);
    border-radius:0.4rem;
    border:0.1rem solid rgba(229,229,229,1);
    margin-bottom: 5rem;
    padding: 4rem 3rem;
    .course-title{
        font-size:4.2rem;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(30,30,30,1);
    }
    .signed{
        font-size:2.4rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,36,13,1);
        margin-top: 2rem;
    }
    .course-date{
        font-size:3rem;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(30,30,30,1);
        justify-content: space-between;
        margin-top: 5rem;
        margin-bottom: 2rem;
    }
    .course-date-descript{
        font-size:2.4rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(164,164,164,1);
        justify-content: space-between;
        margin-bottom: 5rem;
    }
    .sign-btn{
        text-align: center;
        height:8.2rem;
        line-height: 8.2rem;
        border-radius:0.4rem;
        border:0.1rem solid rgba(255,36,13,1);
        font-size:3.2rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,36,13,1);
        padding  1px 0
    }
    .sign-btn-desable{
        border:0.1rem solid rgba(229,229,229,1);
        color:rgba(164,164,164,1);
    }
    .sign-btn-success{
        border:0.1rem solid rgba(0,167,32,1);
        color:rgba(0,167,32,1);
    }
    .course-endTime{
        margin-top: 4rem;
        font-size:2.4rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
    }
}
.list-item-last{
    width: 100%;
    height: 5rem;
}
.sign-content{
    position: absolute;
    width:61rem;
    min-height:59.2rem;
    background:rgba(255,255,255,1);
    border-radius:2.6rem;
    top:50%;
    left 50%;
    margin-top: -29.6rem;
    margin-left: -30.5rem;
    padding: 0 5rem;
    box-sizing: border-box;
}
.sign-confirm-tent{
    margin-top: 16rem;
    line-height:5.4rem;
    box-sizing: border-box;
    >div{
        font-size:3.4rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
    }
}
.sign-confirm-btn{
    text-align: center;
    margin-top: 8rem;
    height:8.2rem;
    line-height: 8.2rem;
    background:rgba(255,36,13,1);
    border-radius:4.1rem;
    font-size:3.2rem;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(255,255,255,1);
}
.sign-confirm-await{
    text-align: center;
    margin-top: 4rem;
    font-size:2.8rem;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(164,164,164,1);
    padding-bottom:4rem;
}
.sign-confirm-icon{
    position: absolute;
    box-sizing: border-box;
    width:13rem;
    height:13rem;
    top: -3rem;
    left: 50%;
    margin-left: -6.5rem;
    // border: 1rem solid rgba(255,255,255,1);
    border-radius: 50%;
    background:rgba(255,255,255,1);
    img{
        width: 100%;
        height: 100%;
    }

}
.wrapper{
    height:50.8rem;
    background:rgba(255,255,255,1);
    overflow: hidden;
}
// .test-items{
//     height: 30rem;
//     overflow: hidden;
// }
.content li{
    height:8.2rem;
    background:rgba(247,247,247,1);
    font-size: 3rem
}
</style>
